<template>
  <div id="content">
    <div id="menu">
      <figure v-for="(v, index) in list" :key="index">
        <img :src="v.src" alt="">
        <p>{{ v.name }}</p>
      </figure>
    </div>

    <div class="top-selling">
      <div class="top-selling-recommend">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue">
          <van-swipe-item>
            <img src="https://hshop.honorfile.com//uomcdn/CN/eoms/202211/29CACE8BB008B23AF9855C0B23181888.png" alt="">
          </van-swipe-item>
          <van-swipe-item>
            <img src="https://hshop.honorfile.com//uomcdn/CN/eoms/202211/70841CC08446714C5EB72BB83817EA14.jpg" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="recommend-item" v-for="(v, index) in goods" :key="index">
        <p class="name">{{ v.name }}</p>
        <p class="sell">{{ v.sell }}</p>
        <p class="price">{{ v.price }}</p>
        <img :src="v.src" alt="">
      </div>
    </div>

    <div class="discount-product">
      <p class="header">
        <span>优惠商品</span>
        <a href="">查看更多></a>
      </p>
      <div class="list">
        <div class="list-product" v-for="(v, index) in expensive" :key="index">
          <img :src="v.src" alt="">
          <div class="detail">
            <p><span>{{ v.sell }}</span>{{ v.name }}</p>
            <p class="cheap">{{ v.produce }}</p>
            <div class="buy-btn">
              <p class="price">{{ v.price }}</p>
              <div class="nowbuy">立即购买</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="water-full">
      <p class="guess-like">
        <span>猜你喜欢</span>
      </p>
      <div class="like">
        <div class="like-product" v-for="(v, index) in like" :key="index">
          <div id="images">
            <img :src="v.src" alt="">
          </div>
          <p class="product"><span v-if="flag">{{ v.new }}</span>{{ v.name }}</p>
          <p class="advantage">{{ v.produce }}</p>
          <p class="money">{{ v.price }}<span>{{ v.oldprice }}</span></p>
          <p class="title"><span>{{ v.send }}</span>&nbsp;<span>{{ v.sell }}</span></p>
        </div>
      </div>
      <p id="tips">已加载全部~</p>
    </div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      list: [],
      goods: [],
      expensive: [],
      like: []
    }
  },
  methods: {
    flag() {
      if (this.v.new == "") {
        this.flag = true
      } else {
        this.flag = false;
      }
    }
  },

  mounted() {
    this.$http({
      url: "http://localhost:3000/Home-Goods-Nav",
      method: "GET"
    }).then((res) => {
      this.list = res.data;
    }),

      this.$http({
        url: "http://localhost:3000/recommend-item",
        method: "GET"
      }).then((res) => {
        this.goods = res.data;
      }),

      this.$http({
        url: "  http://localhost:3000/discount-product",
        method: "GET"
      }).then((res) => {
        this.expensive = res.data;
      }),

      this.$http({
        url: "  http://localhost:3000/waterfall-goods",
        method: "GET"
      }).then((res) => {
        this.like = res.data;
      })
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}

#content {
  width: 23.4375rem;
  min-height: 187.5rem;
  background-color: #f6f6f6;
}

#menu {
  background-color: white;
  border-radius: .625rem;
  width: 20.625rem;
  height: 11.5625rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
  padding: .4375rem 0rem;
  justify-content: space-around;
}

#menu figure {
  box-sizing: border-box;
  width: 4.125rem;
  height: 4.1875rem;
  text-align: center;
}

#menu figure img {
  width: 2.8125rem;
  height: 2.8125rem;
}

#menu figure p {
  display: block;
  width: 4.125rem;
  height: .7813rem;
  margin-top: .5rem;
  font-size: 0.5rem;
  text-align: center;
}

::-webkit-scrollbar {
  display: none;
}

.top-selling {
  width: 20.625rem;
  height: 21.125rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  padding: .625rem 0rem 0rem;
}

.top-selling-recommend {
  width: 10rem;
  height: 13.5rem;
  border-radius: 1.125rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 13.5625rem;
  text-align: center;
  background-color: #39a9ed;
  width: 10rem;
  height: 13.5625rem;
  border-radius: 1.125rem;
}

.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
  border-radius: .625rem;
}

.recommend-item {
  position: relative;
  width: 10rem;
  height: 6.5625rem;
  border-radius: .625rem;
  background-color: #cbe5fe;
  padding: .5rem .7813rem 0rem;
}

.price {
  font-size: .7813rem;
  font-weight: 700;
}

.sell {
  font-size: .75rem;
}

.recommend-item img {
  width: 3.6456rem;
  height: 3.6456rem;
  position: absolute;
  bottom: 0;
  right: .625rem;
  border-radius: .625rem;
}


.discount-product {
  width: 20.5862rem;
  min-height: 23.6962rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.discount-product .header {
  margin-top: .5rem;
  width: 20.625rem;
  height: 3.125rem;
  line-height: 3.125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discount-product .header span {
  display: block;
  height: 3.125rem;
  line-height: 3.125rem;
  font-size: 1.1719rem;
  color: #1a1a1a;
  font-weight: 700;
}

.discount-product .header a {
  text-decoration: none;
  font-size: .5rem;
  color: grey;
}

.list {
  width: 20.625rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.list-product {
  display: flex;
  width: 20.625rem;
  height: 6.51rem;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: .6375rem;
  padding: 1.1719rem 1.0413rem;
  box-sizing: border-box;
  margin-bottom: .5rem;
}

.list-product img {
  width: 4.1662rem;
  height: 4.1662rem;

}

.detail {
  display: flex;
  flex-direction: column;
  width: 13.2956rem;
  height: 4.1662rem;
  justify-content: space-between;
}

.detail p {
  font-size: .6rem;
  color: #000;
  font-weight: 700;
  margin: 0;
}

.detail p span {
  border: 1px solid rgb(68, 68, 240);
  color: rgb(68, 68, 240);
  font-size: .4rem;
  font-weight: 400;
}

.detail .youhui {
  color: grey;
  font-size: .3rem;
}

.detail .buy-btn {
  display: flex;
  align-items: center;
}

.detail .buy-btn p {
  background: url(https://hshopb.honorfile.com/nwap/221030101/staticm/img/index_button.d089a06.png) no-repeat;
  width: 3.8406rem;
  height: 1.1531rem;
  text-align: center;
  line-height: 1.1531rem;
  font-size: .8rem;
  color: #fff;
}

.detail .buy-btn .nowbuy {
  background-color: rgb(255, 176, 176);
  color: #fa2a2d;
  width: 3.7806rem;
  height: 1.0413rem;
  font-size: .4rem;
}

.water-full {
  width: 20.625rem;
  min-height: 12.5rem;
}

.like {
  width: 20.625rem;
  min-height: 18.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.guess-like span {
  font-size: 1.1719rem;
  font-weight: 700;
  margin-top: .5rem;
  width: 20.625rem;
  height: 3.125rem;
  line-height: 3.125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.like-product {
  box-sizing: border-box;
  width: 10.0256rem;
  min-height: 6.25rem;
  padding: 0rem .5208rem .5208rem;
  background-color: white;
  border-radius: .5rem;
  margin-bottom: .5rem;
}

.like-product img {
  width: 6.25rem;
}

.like-product #images {
  width: 8.9375rem;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product {
  font-size: .875rem;
  font-weight: 700;
}

.product span {
  width: 1.7594rem;
  height: .7813rem;
  background-color: #256FFF;
  color: white;
  font-size: .75rem;
  line-height: .7813rem;
  text-align: center;
  border-radius: .1875rem;
}

.advantage {
  font-size: .7813rem;
  margin: .125rem 0 0;
  opacity: 0.6;
}

.money {
  font-size: .875rem;
  font-weight: 700;
  display: block;
  margin-top: .5rem;
}

.money span {
  text-decoration: line-through;
  font-size: .75rem;
  font-weight: 200;
  opacity: 0.6;
}

.title span {
  color: #256FFF;
  border: 1px solid #256FFF;
  border-radius: .3125rem;
  font-size: .75rem;
}

#tips {
  text-align: center;
  margin-top: 2.5rem;
  opacity: 0.6;
  font-size: .875rem;
}
</style>